import { Table, Button, Select, Input, message } from 'antd';
import { useEffect, useState } from 'react';
import {} from '@ant-design/icons';
import { getCardsList } from 'api/cards';
import { getGroupInfo, addDeck } from '@/api/modules/group';
import { useLocation, useParams } from 'react-router-dom';
import { cloneDeep } from 'lodash';
export default function () {
	const [options, setoptions] = useState([]);
	const [selects, setselects] = useState([]);
	const [dataSource, setdataSource] = useState<any>([]);
	const { id }: any = useParams();

	useEffect(() => {
		getCardsList({ groupId: id }).then(({ list }) => {
			setdataSource(list.map(({ id, name }: any, sort: number) => ({ id, name, sort })));
		});
	}, []);

	return (
		<div className=' flex flex-col gap-2'>
			<div className=' flex '>
				<Select
					showSearch
					value={selects}
					placeholder='输入牌型名称搜索'
					className=' w-64'
					defaultActiveFirstOption={false}
					showArrow={false}
					filterOption={false}
					mode='multiple'
					onSearch={async (newValue: string) => {
						if (!newValue) return setoptions([]);
						const { list } = await getCardsList({ name: newValue });
						setoptions(list.map(({ id, name }: any) => ({ value: JSON.stringify([id, name]), label: name })));
					}}
					notFoundContent={'没有找到对应牌型'}
					options={options}
					onChange={setselects}
				/>
				<Button
					disabled={!selects || !selects.length}
					onClick={() => {
						const hasids: any = dataSource.map(({ id }) => id);
						selects.forEach((e: string) => {
							const [id, name]: any = JSON.parse(e);
							if (hasids.includes(id)) return;
							dataSource.push({ id, name });
						});
						setdataSource([...dataSource]);
					}}>
					添加
				</Button>
				<Button
					className=' ml-auto '
					type='primary'
					onClick={() => {
						console.log({ dataSource });
					}}>
					提交
				</Button>
			</div>
			{dataSource.map(({ id, name }: any, i: number) => (
				<div className=' flex items-center bg-blue-50 rounded w-min p-2'>
					<div className=' w-28 truncate'>{name}</div>
					<div className=' whitespace-nowrap'>
						<Button
							size='small'
							onClick={() => {
								const next = cloneDeep(dataSource[i - 1]);
								if (!next) return message.error('不能再往下了');
								dataSource[i - 1] = cloneDeep(dataSource[i]);
								dataSource[i] = cloneDeep(next);
								setdataSource([...dataSource]);
							}}>
							上移
						</Button>
						<Button
							size='small'
							onClick={() => {
								const next = cloneDeep(dataSource[i + 1]);
								if (!next) return message.error('不能再往下了');
								dataSource[i + 1] = cloneDeep(dataSource[i]);
								dataSource[i] = cloneDeep(next);
								setdataSource([...dataSource]);
							}}>
							下移
						</Button>
						<Button
							size='small'
							onClick={() => {
								dataSource.splice(i, 1);
								setdataSource([...dataSource]);
							}}>
							移除
						</Button>
					</div>
				</div>
			))}
		</div>
	);
}
